<template>
	<view>
		<view class="uni-input" @touchmove.stop.prevent="() => { }">
			<uni-data-picker placeholder="请选择" :clear-icon="false" popup-title="请选择城市" :localdata="range" v-model="actPicker"
				@change="bindPickerChange">
			</uni-data-picker>
			<uni-icons type="right" color="#999" size="16"></uni-icons>
		</view>
	</view>
</template>

<script>
	import address from '@/static/address.js';
	export default {
		model: {
			event: "inputFun",
		},
		props: ["Radio", "inputName"],
		data() {
			return {
				range: address,
				actPicker: ""

			};
		},
		watch: {
			inputName(newVal) {
				if (this.inputName && this.inputName.length > 0 && this.inputName.split(",")) {
					this.actPicker = [{
						value: Number(this.inputName.split(",").pop())
					}]
				} else {
					this.actPicker = []
				}
			}
		},
		mounted() {
			if (this.inputName && this.inputName.length > 0 && this.inputName.split(",")) {
				this.actPicker = [{
					value: Number(this.inputName.split(",").pop())
				}]
			} else {
				this.actPicker = []
			}
		},
		methods: {
			bindPickerChange(e) {
				this.actPicker = e.detail.value
				console.log(this.actPicker)
				let value = `${e.detail.value[0].value},${e.detail.value[1].value},${e.detail.value[2].value}`
				console.log(value)
				this.$nextTick(() => {
					this.$emit("inputFun", value)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.uni-input {
		display: flex;
		justify-content: right;
		align-items: center;
		height: 100%;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;

		.placeholder {
			color: #7B66FE;
		}
	}

	/deep/.input-value {
		border: none !important;
		padding: 0;
	}

	/deep/.selected-area {
		justify-content: right;
	}

	/deep/.selected-list {
		justify-content: right;
	}


	/deep/.arrow-area {
		display: none;
	}

	/deep/.placeholder {
		color: #999;
		font-size: 30rpx;
		font-weight: 500;
	}

	/deep/.uni-data-tree {
		.uni-data-tree-input {
			.input-value {
				.uni-scroll-view-content {
					.selected-list {
						.selected-item {
							display: none;

							&:last-child {
								display: block !important;
							}
						}
					}
				}
			}
		}
	}
</style>